<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="handler"/>
  </div>
</template>

<script>
export default {
  name: "",
  // props:['addItem'],
  methods: {
    //Header组件实例的方法:当用户按下键盘回车键触发
    handler(event){
      //整理好：新增todo事件，应该是一个对象，包含id、title、done
      let newObj = {id:Date.now(),title:event.target.value,done:false};
      //通过自定义事件：实现儿子给父亲传递数据
      this.$emit("addItem",newObj);
      //最终调用App父组件的方法
      // this.addItem(newObj);
      //清空表单的内容
      event.target.value ='';
    }
  }
};
</script>

<style scoped>
</style>
